require(['./config'],() => {
	require(['request','template','header','footer'],(req,template,header) => {
		class ShoppingCar{
			constructor() {
				// this.prodTotalPrice = 0
				this.totalCount = 0
				this.totalPrice = 0
				this.prodList = []
				this.init()
				
			}
			init(){
				// 初始化页面 => 根据localstorage 里面的数据 渲染页面
				// 先把prodList 取出来
				let prodList = localStorage.getItem('prodList') ? JSON.parse(localStorage.getItem('prodList')) : []
				$(".prodShopping").html(template('carTemplate',{prodList}))
				// this.prodTotal(prodList)
				this.total(prodList)
				this.prodList = prodList
				this.bindDelEvent()
				header.allCount()
				this.checkAll()
			}
			// 计算所有的商品数量和总价
			total(prodList){
				this.totalPrice = 0
				prodList.forEach(item => {
					// this.totalCount += item.count
					this.totalPrice += item.count * item.price
				})	
				// console.log(this.totalPrice)
				$('.money').text((this.totalPrice).toFixed(2))
			}
			
		
			// 绑定事件 删除
			bindDelEvent(){
				$('.prodShopping')[0].onclick = e => {
					const target = e.target
					// 获取id
					const id = $(target).attr('prodId') - 0
					// console.log(id)
					// 判断点击的是不是删除按钮
					// console.log(target)
					if(target.nodeName === 'A' && $(target).hasClass('btn-del')){
						// 点击的是删除
						// 在数组里面去进行对比 并删除一条数据
						this.prodList.forEach((item,index) => {
							if(item.id === id){
								this.prodList.splice(index,1)
							}
						})
						// console.log(this.prodList)						
					}									
					// 点击加减
					if(target.nodeName === 'A' && $(target).hasClass('jian')){
						// 点击的是 -
						this.prodList.forEach(item => {
							if(item.id === id){
								item.count <= 1 ? '' : item.count--
							}
						})
					}
					if(target.nodeName === 'A' && $(target).hasClass('jia')){
						// 点击的是 +
						// console.log('哈哈哈')
						this.prodList.forEach(item => {
							if(item.id === id){
								item.count++
								// console.log(item.count)
							}
						})
					}
					
					// 重新保存数据到localStorage
					localStorage.setItem('prodList',JSON.stringify(this.prodList))
					this.init()
					
				}		
			}
			// 全选
			checkAll(){
				// 先用一个变量把这个this保存一下
				const that = this
				// 全选按钮事件
				$('.a_check_all')[0].onclick = function(){
					// console.log(123)
					// 让当前这个元素切换背景图
					$(this).toggleClass('checked')
					// 其他元素要和上面这个元素统一 => this.prodList => 存储数据到localStorage => 重新渲染页面
					that.prodList.forEach(item =>{
						// 判断这个 .a_check_all 有没有这个checked 这个类名 如果有就是全选中,没有就是不选
						// hasClass() => 布尔值
						item.isChecked = $(this).hasClass('checked')
					})
					// console.log(that.prodList)
					localStorage.setItem('prodList',JSON.stringify(that.prodList))
					// 重新渲染页面
					that.init()
				}
				
				// 单选按钮事件
				// 这个地方获取的是一个伪数组,伪数组不能使用数组的方法
				// 通过document.getElementsByClassName 获取的就是伪书组
				// 那我只要把它变成一个真数组就可以了 Array.from()
				const btns = Array.from(document.querySelectorAll(".ckchecked"))
				btns.forEach((item,index) => {
					item.onclick = function(){
						console.log(item)
						// that.prodList[index].isChecked = !(that.prodList[index].isChecked)
						// localStorage.setItem('prodList',JSON.stringify(that.prodList))
						// // 重新渲染页面
						// that.init()
					}				
				})
				
			}
		}
		return new ShoppingCar()
	})
})